<template>
  <div class="index" id="container"></div>
</template>
<script setup>
import * as Cesium from "cesium";
import * as turf from "@turf/turf";
import { onMounted } from "vue";

onMounted(async () => {
  // Cesium.Ion.defaultAccessToken= 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZGJlOTBmMi0xYjNmLTRhMzYtOTlhMy0zNGIwOGUyNGFkYTUiLCJpZCI6MTE1MTg3LCJpYXQiOjE2Njg2NzM2NTB9.kQwPYh1h1KTzNcwTFkoW36f8DpbDGhdDhrpzHHFUfTk'
  const esri = new Cesium.ArcGisMapServerImageryProvider({
    url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
    enablePickFeatures: false,
  });
  //viewer一切API的开始
  let viewer = new Cesium.Viewer("container", {
    // imageryProvider:esri,
    infoBox: false,
    //是否显示图层选择控件
    baseLayerPicker: false,
    //是否显示动画控件
    animation: false,
    //是否显示时间轴控件
    timeline: false,
    //是否显示全屏按钮
    fullscreenButton: false,
    //是否显示搜索按钮
    geocoder: false,
    //是否显示主页按钮
    homeButton: false,
    //是否显示帮助提示按钮
    navigationHelpButton: false,
    //是否显示投影方式按钮
    sceneModePicker: false,
  
  });
  const degress = new Cesium.Cartesian3.fromDegrees(120, 29, 1000);
  viewer.camera.setView({
    destination: degress,
    orientation: {
      heading: Cesium.Math.toRadians(10),
      pitch: Cesium.Math.toRadians(-100),
      roll: Cesium.Math.toRadians(10),
    },
  });
  viewer.camera.flyTo({
    destination: degress,
    orientation: {
      heading: Cesium.Math.toRadians(20),
      pitch: Cesium.Math.toRadians(-90, 0),
      roll: 0.0,
    },
    duration: 3,
  });
  console.log(degress);
  //   viewer.camera.lookAt(
  //     degress,
  //     new Cesium.HeadingPitchRange(
  //       Cesium.Math.toRadians(0),
  //       Cesium.Math.toRadians(-90),
  //       20000
  //     )
  //   );
  //   const point1 = new Cesium.Entity({
  //     id: "point1",
  //     position: Cesium.Cartesian3.fromDegrees(114, 30, 1000),
  //     point: {
  //       color: Cesium.Color.BLUE,
  //       pixelSize: 20,
  //     },
  //     label: {
  //       text: "BLAZER",
  //       fillColor: Cesium.Color.YELLOW,
  //       showBackground: true,
  //       backgroundColor: new Cesium.Color(255, 255, 255, 0),
  //     },
  //   });
  //   viewer.entities.add(point1);
  //   const line = viewer.entities.add({
  //     polyline: {
  //       positions: Cesium.Cartesian3.fromDegreesArray([114, 30, 114, 40,]),
  //       material: Cesium.Color.YELLOW,
  //       width: 20,
  //     },
  //   });
  //   viewer.entities.add(line);
  const polygon = viewer.entities.add({
    polygon: {
      hierarchy: {
        positions: Cesium.Cartesian3.fromDegreesArray([
          120, 29, 121, 29, 120.5, 28,
        ]),
      },
      material: Cesium.Color.RED.withAlpha(0.5),
      height: 10000,
      extrudedHeight: 20000,
      outline: true,
      outlineColor: Cesium.Color.WHITE,
    },
  });
  viewer.zoomTo(polygon);
  // viewer.entities.remove(polygon)
  const box = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(119, 30, 3000),
    box: {
      dimensions: new Cesium.Cartesian3(2000, 1000, 3000),
      material: Cesium.Color.BLUEVIOLET,
    },
  });
  viewer.zoomTo(box);
  console.log(turf);
  const lineStiring = turf.lineString([
    [-24, 63],
    [-23, 60],
    [-25, 65],
    [-20, 69],
  ]);
  const data = await Cesium.GeoJsonDataSource.load(lineStiring, {
    stroke: Cesium.Color.WHITE,
    fill: Cesium.Color.BLUE.withAlpha(0.3), //注意：颜色必须大写，即不能为blue
    strokeWidth: 5,
  });
  console.log(data);
  viewer.dataSources.add(data);
  //primitive
  const primitive = new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
      geometry: new Cesium.EllipseGeometry({
        center: Cesium.Cartesian3.fromDegrees(-100, 20),
        semiMinorAxis: 500000,
        semiMajorAxis: 1000000,
        rotation: Cesium.Math.PI_OVER_FOUR,
        vertexFormat: Cesium.VertexFormat.POSITION_AND_ST,
      }),
    }),
    appearance: new Cesium.EllipsoidSurfaceAppearance({
      material: Cesium.Material.fromType("Stripe"),
    }),
  });
  console.log("111");
  viewer.scene.primitives.add(primitive);
  const rectangleInstance = new Cesium.GeometryInstance({
    geometry: new Cesium.RectangleGeometry({
      rectangle: Cesium.Rectangle.fromDegrees(-140, 30, -100, 40),
    }),
    id: "rectangle",
    attributes: {
      color: new Cesium.ColorGeometryInstanceAttribute(0, 1, 1, 0.5),
    },
  });
  const ellipsoidInstance = new Cesium.GeometryInstance({
    geometry: new Cesium.EllipsoidGeometry({
      radii: new Cesium.Cartesian3(500000, 500000, 1000000),
      vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL,
    }),
    modelMatrix: Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
      Cesium.Cartesian3.fromDegrees(-95.59777, 40.03883)), new Cesium.Cartesian3(0.0, 0.0, 500000.0), new Cesium.Matrix4()),
    id: "ellipsoid",
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA),
    },
  });
  viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances:[rectangleInstance,ellipsoidInstance],
    appearance:new Cesium.PerInstanceColorAppearance()
  }))

  // const tileset=viewer.scene.primitives.add(
  //   new Cesium.Cesium3DTileset({

  //     url:Cesium.IonResource.fromAssetId(69380),
  //        maximumScreenSpaceError: 18  
  //   })
  // )
  // viewer.flyTo(tileset)
});
const getdata = async (data, viewer) => {
  console.log(data);
  data.then((res) => {
    console.log(res);
  });
};
</script>
<style scoped>
.index {
  width: 100%;
  height: 100%;
}
</style>